<template>
  <div class="main">
    <div class="title">
      <a href="/login">登录</a>
      <span>·</span>
      <a class="active" href="/register">注册</a>
    </div>

    <div class="sign-up-container">
      <form action="register">
        <div class="input-prepend restyle">
          <input
            v-model="member.nickname"
            type="text"
            placeholder="你的昵称">
          <i class="iconfont icon-user"/>
        </div>
        <div class="input-prepend restyle no-radius">
          <input
            v-model="member.mobile"
            type="text"
            placeholder="手机号">
          <i class="iconfont icon-phone"/>
          <div class="input-prepend restyle no-radius" style="position:relative">
            <input
              v-model="member.code"
              type="text"
              placeholder="验证码">
            <i class="iconfont icon-yanzhengma"/>
            <el-button
              :disabled="flag"
              style="position:absolute;right: 10px;top: 10px;"
              type="text"
              @click="getCodeFun()">{{ codeText }}</el-button>
          </div>
          <div class="input-prepend">
            <input
              v-model="member.password"
              type="password"
              placeholder="设置密码">
            <i class="iconfont icon-password"/>
          </div>
          <div class="btn">
            <input
              type="button"
              class="sign-up-button"
              value="注册"
              @click="submitRegister()">
          </div>
          <p class="sign-up-msg">
            点击 “注册” 即表示您同意并愿意遵守简书
            <br>
            <a target="_blank" href="http://www.jianshu.com/p/c44d171298ce">用户协议</a>
            和
            <a target="_blank" href="http://www.jianshu.com/p/2ov8x3">隐私政策</a> 。
          </p>
      </div></form>
      <!-- 更多注册方式 -->
      <div class="more-sign">
        <h6>社交帐号直接注册</h6>
        <ul>
          <li><a id="weixin" class="weixin" href="http://localhost:8160/api/ucenter/wx/login"><i class="iconfont icon-weixin"/></a></li>
          <li><a id="qq" class="qq" target="_blank" href="#"><i class="iconfont icon-qq"/></a></li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import '~/assets/css/sign.css'
import '~/assets/css/iconfont.css'
import ucenterApi from '~/api/ucenter'
export default {
  layout: 'sign',
  data() {
    return {
      flag: false,
      member: {
        mobile: '',
        code: '',
        nickname: '',
        password: ''
      },
      sending: false, // 是否发送验证码
      second: 60, // 倒计时间
      codeText: '获取验证码',
      timer: {}
    }
  },
  methods: {
    // 获取验证码
    getCodeFun() {
      // 对手机号码位数进行校验
      if (!this.member.mobile || this.member.mobile.length !== 11) {
        this.$message.warning('请输入正确的手机号码')
        return
      }
      // 获取验证码
      ucenterApi.sendMsg(this.member.mobile).then(r => {
        this.$message.success('验证码发送成功！')
      })
      // 验证码发送间隔倒计时
      this.timeDown()
    },

    // 倒计时
    timeDown() {
      // 对发送按钮进行禁用
      this.flag = true
      // 验证码按钮文本修改为倒计时
      this.codeText = 60
      // 每过一秒验证码按钮文本-1
      // 定时任务方法调用后会返回 定时任务对象
      this.timer = setInterval(() => { // 每过1000毫秒调用一次函数
        this.codeText--
        if (this.codeText === 0) {
          // 如果验证码按钮文本为0 按钮设置为可用，按钮文本修改为重新获取验证码
          this.flag = false
          this.codeText = '重新发送验证码'
          // 关闭定时任务
          clearInterval(this.timer)
        }
      }, 1000)
    },

    // 注册
    submitRegister() {
      ucenterApi.register(this.member).then(r => {
        // 注册成功后跳转至登录页面
        this.$message.success('恭喜你注册成功！稍后自动跳转到登录页面....')
        setTimeout(() => {
          this.$router.push('/login')
        }, 2000)
      })
    }
  }
}
</script>
